<template>
  <view class="first-created" @click="closeFirstCreated">
    <view class="flex-row">
      <view class="flex-item" style="opacity: 0;">
        <text>123</text>
      </view>
      <view class="first-created-title flex-item flex-row flex-center">
        <text class="text-30 color-secondary">{{ tabName }}</text>
      </view>
    </view>
    <view class="flex-column align-end first-created-content">
      <image src="https://tbb-file.oss-cn-shenzhen.aliyuncs.com/tbb_admin_app/static/pic_arrow.png" class="first-created-arrow" />
      <text class="text-26 color-white">{{ placeholder }}</text>
    </view>
  </view>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  name: 'FirstCreate',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    tabName: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: ''
    }
  },
  created() {

  },
  methods: {
    closeFirstCreated() {
      // this.$emit('close')
      this.setFirstCreateOrder(false)
    },
    ...mapMutations({
      setFirstCreateOrder: 'order/setFirstCreateOrder'
    })
  }
}
</script>

<style scoped lang="scss">
.first-created{
  @include position(fixed,0,0,0,0);
  background:rgba(0,0,0,.6);
  z-index:1000;
}
.first-created-title{
  height:86rpx;
  background:#fff;
}
.first-created-content{
  padding-right:230rpx;
  margin-top:10rpx;
}
.first-created-arrow{
  width:170rpx;
  height:170rpx;
  margin-right:17rpx;
}
</style>
